import { Flex, Input, Radio } from 'antd'
import './index.scss'
import PIcon from '@/component/common/pIcon'
import { alphabets } from '@/config/globalConfig'

export type Selection = {
  value: string
  label: string
  content: string
}
export interface SingleChoiceProps {
  selections?: Array<Selection>
  answer?: string
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO'
  onSelectionChange?: (selections: any) => void
  onAnswerChange?: (answer: string) => void
}

function SingleChoice(props: SingleChoiceProps) {
  let {
    selections = [],
    state = 'QUESTYPE',
    onSelectionChange = () => {},
    onAnswerChange = () => {},
    answer = '',
  } = props

  if (state === 'QUESTYPE') {
    selections = [
      { label: 'A', value: 'A', content: '选项1' },
      { label: 'B', value: 'B', content: '选项2' },
      { label: 'C', value: 'C', content: '选项3' },
      { label: 'D', value: 'D', content: '选项4' },
    ]
  }
  const appendSelection = (index: number) => {
    if (selections.length >= 10) return
    const newSelection = {
      label: alphabets[selections.length],
      value: alphabets[selections.length],
      content: '',
    }
    const newSelections = [
      ...selections.slice(0, index + 1),
      newSelection,
      ...selections.slice(index + 1),
    ]
    newSelections.forEach((selection, idx) => {
      selection.label = alphabets[idx]
      selection.value = alphabets[idx]
    })
    onSelectionChange(newSelections)
  }
  const removeSelection = (index: number) => {
    if (selections.length <= 2) return
    const newSelections = [
      ...selections.slice(0, index),
      ...selections.slice(index + 1),
    ]
    newSelections.forEach((selection, idx) => {
      selection.label = alphabets[idx]
      selection.value = alphabets[idx]
    })
    onSelectionChange(newSelections)
  }
  return (
    <div>
      <Radio.Group
        disabled={['READ', 'PREVIEW'].includes(state)}
        onChange={(e) => {
          onAnswerChange(e.target.value)
        }}
        value={answer}>
        <Flex gap={'5px'} vertical>
          {selections.map((item, index) => {
            return (
              <Radio key={item.value} value={item.value}>
                <Flex align="center" gap="0.3rem">
                  <span style={{ width: '20px' }}>{item.label}</span>
                  {['READ', 'PREVIEW', 'TODO'].includes(state) ? (
                    <div>{item.content}</div>
                  ) : (
                    <Input
                      disabled={['READ', 'PREVIEW'].includes(state)}
                      style={{ minWidth: '500px' }}
                      key="name"
                      placeholder="请输入"
                      value={item.content}
                      allowClear
                      onChange={(e) => {
                        selections[index].content = e.target.value
                        onSelectionChange(selections)
                      }}
                    />
                  )}
                  {['WRITE'].includes(state) && (
                    <>
                      <PIcon
                        name="icon-add-circle"
                        size={20}
                        onClick={() => {
                          appendSelection(index)
                        }}></PIcon>
                      <PIcon
                        name="icon-minus-circle"
                        size={20}
                        onClick={() => {
                          removeSelection(index)
                        }}></PIcon>
                    </>
                  )}
                </Flex>
              </Radio>
            )
          })}
        </Flex>
      </Radio.Group>
    </div>
  )
}

export default SingleChoice
